<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实时翻译</title>
    <style>
      #texts {
        width: 300px;
        height: 300px;
        box-sizing: border-box; /* 确保宽度和高度包括内边距和边框 */
        padding: 10px; /* 添加内边距 */
        margin: 0; /* 移除默认外边距 */
        border: 1px solid black; /* 添加边框 */
        vertical-align: top; /* 对齐顶部 */
      }

      p {
        width: 300px;
        height: 300px;
        background-color: rgb(137, 145, 152);
        display: inline-block;
        margin: 0; /* 移除默认外边距 */
        vertical-align: top; /* 对齐顶部 */
      }
    </style>
  </head>
  <body>
    <div id="app">
      翻译成的语言：<select v-model="obj.lang">
        <option value="en">英文</option>
        <option value="zh">中文</option>
        <option value="ru">俄语</option>
      </select>
      <br />
      <div>
        <textarea name="texts" id="texts" v-model="obj.words"></textarea>
        <p>{{exTexts}}</p>
      </div>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          obj: {
            words: "",
            lang: 'en',
          },
          exTexts: "",
          timer:null //延时器 id
        },
        methods: {},
        watch: {
          // 该方法会在数据变化时调用执行，监听words的变化
           "obj.words"(newValue) {
            //防抖 延迟执行  一段时间内没有再次触发 才执行下面的代码

            // let salt = Math.floor(100000 + Math.random() * 900000);
            // console.log(
            //   "20240407002016340" + newValue + salt + "qRTmxT3urB1kcrhGoh78"
            // );
            // console.log(
            //   "md5加密后是：" +
            //     CryptoJS.MD5(
            //       "20240407002016340" + newValue + salt + "qRTmxT3urB1kcrhGoh78"
            //     )
            // );
            clearTimeout(this.timer);
            this.timer =setTimeout(async()=>{
              const res = await axios({
              url: "http://localhost:8000/api/getTruncate",
              params: {
                q: this.obj.words,
                // from: "zh",
                // to: "en",
                // appid: "20240407002016340",
                // appid +q +salt +sign的md5
                // sign: CryptoJS.MD5(
                //   "20240407002016340" + newValue + salt + "qRTmxT3urB1kcrhGoh78"),
              },
            })
            console.log(res);
            let resJson = JSON.parse(res.data.obj);
            console.log(resJson.trans_result);
            this.exTexts =resJson.trans_result[0].dst;
            },1000)
       
          },
        },
      });
    </script>
  </body>
</html>
